﻿<template>
  <div class="deviceCurrent-container">
    <el-dialog v-model="isShowDialog" width="100%" :close-on-click-modal="false" height="100%">
      <template #header>
        <div style="color: #fff">
          <span>{{ title }}</span>
        </div>
      </template>
    
    <div class="scroll-container">
      <el-row :gutter="20">
        <el-col v-for="(slave, index) in deviceRelSlaves" :key="index" >
          <el-card shadow="hover" class="card">
            <!-- <div slot="header">
              <span>{{ slave.deviceSlaveTemplate.slaveName }}，串口序号: {{ slave.comIdx }}，从机地址: {{ slave.slaveAddr }}</span>
            </div> -->
            <div class="point-container">
              <div v-for="(point, idx) in slave.deviceSlaveTemplate.deviceSlaveTemplatePoint" :key="idx" class="point-item">
                <template v-if="point.regType === 0">
                  <span>{{ point.pointName }}:</span>
                  <el-switch v-model="point.dataValue" active-value="True" inactive-value="False"></el-switch>
                </template>
                <template v-else-if="point.regType === 1">
                  <span>{{ point.pointName }}:</span>
                  <el-icon :size="20" :color="point.dataValue === 'True' ? 'green' : ''">
                    <Opportunity />
                  </el-icon>
                </template>
                <template v-else-if="point.regType === 3 || point.regType === 4">
                  <span>{{ point.pointName }}:</span>
                  <el-input v-model="point.dataValue" placeholder=""></el-input>
                </template>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup="" name="devicePointsValueHistory">
  import { ref } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import {Opportunity} from "@element-plus/icons-vue";
  import { auth } from '/@/utils/authFunction';

  import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
  import { getDictLabelByVal as dv } from '/@/utils/dict-utils';
  import { formatDate } from '/@/utils/formatTime';


  import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
  import editDialog from '/@/views/Device/devicePointsValueHistory/component/editDialog.vue'
  import { getDeviceCurrentState } from '/@/api/Device/Template/deviceSlaveTemplatePointsValue';
  import { getDeviceInfoDeviceInfoIdDropdown } from '/@/api/Device/devicePointsValueHistory';

	import { getAPI } from '/@/utils/axios-utils';
	import { SysEnumApi } from '/@/api-services/api';
  import commonFunction from '/@/utils/commonFunction';

  const showAdvanceQueryUI = ref(true);
  
  const loading = ref(false);

  const queryParams = ref<any>({});
 

  const printDevicePointsValueHistoryTitle = ref("");
  const editDevicePointsValueHistoryTitle = ref("");
  const deviceRelSlaves = ref<any[]>([]);
    const title = ref("设备运行状态");
    const isShowDialog = ref(false);

  // 改变高级查询的控件显示状态
  const changeAdvanceQueryUI = () => {
    showAdvanceQueryUI.value = !showAdvanceQueryUI.value;
  }

  // 查询操作
  const handleQuery = async () => {
    loading.value = true;
    var res = await getDeviceCurrentState(queryParams.value);
    console.log(res);
 // 解析 res.data.result 并设置 deviceRelSlaves
 if (res && res.data && res.data.result) {
      deviceRelSlaves.value = res.data.result.deviceRelSlaves || [];
    }

    console.log(deviceRelSlaves.value);
    loading.value = false;
  };

   // 获取按钮类型
   const getButtonType = (dataValue: string) => {
    if (dataValue === "True") {
      return "success";
    } else if (dataValue === "False") {
      return "warning";
    } else if (!isNaN(Number(dataValue))) {
      return "info";
    } else {
      return "primary";
    }
  };

  const openDialog = async (deviceId: string) => {
    queryParams.value.deviceId = deviceId;
    isShowDialog.value = true;
    handleQuery();
  };
  // 打开打印页面
  const openPrintDevicePointsValueHistory = async (row: any) => {
    printDevicePointsValueHistoryTitle.value = '打印变量历史值';
  }


  // 删除
  const delDevicePointsValueHistory = (row: any) => {
    ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
  .then(async () => {
    //await deleteDevicePointsValueHistory(row);
    handleQuery();
    ElMessage.success("删除成功");
  })
  .catch(() => {});
  };



  const deviceInfoDeviceInfoIdDropdownList = ref<any>([]); 
  const getDeviceInfoDeviceInfoIdDropdownList = async () => {
    let list = await getDeviceInfoDeviceInfoIdDropdown();
    deviceInfoDeviceInfoIdDropdownList.value = list.data.result ?? [];
  };
  getDeviceInfoDeviceInfoIdDropdownList();
  
  handleQuery();
  defineExpose({ openDialog });

</script>
<style scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
}
.devicePointsValueHistory-container {
  height: 100%;
  overflow: hidden;
}

.scroll-container {
  height: calc(100vh - 200px); /* 调整高度以适应你的布局 */
  overflow-y: auto;
  padding: 10px;
}

.card {
  height: 100%;
  overflow: hidden;
}

.card .el-card__body {
  height: 100%;
  overflow-y: auto;
}

.point-container {
  display: flex;
  flex-wrap: wrap;
}

.point-item {
  flex: 0 0 calc(100% / 10); /* 每行显示11个项目，减去边距 */
  margin: 0px;
  display: flex;
  align-items: center;
}
</style>

